<template>
	<view class="earthquakeSearchCom">
		<view class="search-content">
			<view class="input-box">
				<view class="inputLabel">日期查询</view>
				<view class="inputDate" @click="showCalendar">
					<view v-if="searchForm.date" class="date-text">{{searchForm.date}}</view>
					<view v-else class="date-placeholder">请选择</view>
					<u-icon name="arrow-right" size="30"></u-icon>
				</view>
			</view>
			<view class="input-box">
				<view class="inputLabel">名称查询</view>
				<view class="inputDate">
					<u-search class="searchBox" shape="square" placeholder="请输入" v-model="value" :clearabled="false" :show-action="false"></u-search>
				</view>
			</view>
			<view class="choose-area">
				<view class="inputLabel">状态</view>
				<view class="chooseList">
					<view class="chooseItem" :class="{chooseActive: searchForm.resStatus==item.name?true:false}" 
						v-for="(item, index) in serchList" :key="index" @click="chooseStatusClick(item,index)">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="kong-box"></view>
		<view class="btn-box">
			<!-- <view class="resetBtn" @click="resetSearch">重置</view> -->
			<view class="sureBtn" @click="confirmSearch">确认</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			searchForm: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				value:'',
				serchList:[{
					name:'出土场地申报',
					id:'402887ae7b62cd4f017b62ef1f4c0170'
				},{
					name:'出土申请',
					id:'402887ae7b1aca6f017b1b572b0e1913'
				},{
					name:'消纳场地申报',
					id:'402887ae7af5e872017af60b5a6f04a6'
				},{
					name:'运输审核',
					id:'402887ae7ba05810017ba55d71f6195a,402887ae7ba05810017ba55c4a501939,402887ae7ba05810017ba558ec9b18dd,402887ae7ba05810017ba553d16e185e'
				}]
			};
		},
		methods: {
			showCalendar(){
				this.$emit('showCalendar')
			},
			confirmSearch(){
				this.$emit('confirmSearch',this.value)
			},
			resetSearch(){
				this.$emit('resetSearch')
			},
			chooseStatusClick(item){
				this.$emit('chooseStatusClick',item)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.earthquakeSearchCom{
		background-color: #fff;
		height: 680rpx;
		display: flex;
		flex-direction: column;
		.choose-area{
			padding: 15rpx 27rpx 0 27rpx;
			
			.inputLabel{
				width: 160rpx;
				line-height: 70rpx;
			}
			.chooseList{
				display: flex;
				flex-wrap: wrap;
				
				.chooseItem{
					min-width: 210rpx;
					height: 74rpx;
					line-height: 74rpx;
					text-align: center;
					font-size: 28rpx;
					color: #666666;
					background-color: #f5f5f5;
					margin: 0 18rpx 20rpx 0;
					
					
				}
				.chooseActive {
					background-color: #137EFB;
					color: #fff;
				}
			}
		}
		.search-content{
			// height: 300rpx;
			overflow-y: scroll;
			.input-box{
				display: flex;	
				justify-content: space-between;
				padding: 15rpx 27rpx 0 27rpx;
				
				view{
					height: 70rpx;
					line-height: 70rpx;
				}
				.inputLabel{
					width: 160rpx;
				}
				.inputDate{
					display: flex;
					
					.date-placeholder,.date-text{
						padding-right: 20rpx;
					}
					.searchBox{
						width: 520rpx;
					}
				}
			}
		}
		.kong-box{
			flex: 1;
		}
		.btn-box{
			display: flex;
			
			view{
				border-top: 2rpx solid #E5E5E5;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 30rpx;
				color: #666666;
				width: 40%;
			}
			.sureBtn{
				width: 100%;
				color: #fff;
				background-color: #137EFB;
			}
		}
	}
	

</style>
